<template>
  <div class="gauge-container">
    <v-chart class="chart" :option="option" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { GaugeChart } from "echarts/charts";
import VChart from "vue-echarts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";

// 注册必要的组件
use([
  CanvasRenderer,
  GaugeChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

defineOptions({
  name: "Gauge",
});

// 接收属性
// const props = defineProps({
//   value: {
//     type: Number,
//     default: 70,
//   },
//   title: {
//     type: String,
//     default: "完成率",
//   },
// });

// 仪表盘配置
const option = ref({
  series: [
    {
      type: "gauge",
      axisLine: {
        lineStyle: {
          width: 20,
          color: [
            [0.3, "#67e0e3"],
            [0.7, "#37a2da"],
            [1, "#fd666d"],
          ],
        },
      },
      pointer: {
        itemStyle: {
          color: "auto",
        },
        width: 4,
      },
      axisTick: {
        distance: -30,
        length: 8,
        lineStyle: {
          color: "#fff",
          width: 1,
        },
      },
      splitLine: {
        distance: -30,
        length: 30,
        lineStyle: {
          color: "#fff",
          width: 2,
        },
      },
      axisLabel: {
        color: "inherit",
        distance: 20,
        fontSize: 12,
      },
      detail: {
        valueAnimation: true,
        formatter: "{value}",
        color: "inherit",
        fontSize: 20,
        fontWeight: "bold",
      },
      data: [
        {
          value: 70,
        },
      ],
    },
  ],
});
</script>

<style scoped lang="scss">
.gauge-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
